<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script>
        window.onload = function (){
            let text = document.createTextNode( new Date().toLocaleString()+":"+new Date().getTime() );
            document.body.appendChild( text )
        }
        function sendAjax(){
            // 通过JS发生ajax异步请求，是需要通过如下对象完成
            // XMLHttpRequest || ActiveXObject
            // 1. 获取异步请求对象
            let xhr = null;
            if(XMLHttpRequest){
                // 判断当前浏览器环境存在 XMLHttpRequest 对象，可以使用该对象
                xhr = new XMLHttpRequest();
            } else {
                // IE7 以前的浏览器，没有 XMLHttpRequest 对象
               xhr = new ActiveXObject("Micrisoft.XMLHttp");
            }
            // 2. 打开请求连接 - 请求配置
            // xhr.open(请求类型，请求地址，是否异步)
            //      当第三个参数取值为 false 标识用 同步规则 => 会阻断用户对页面中原元素的其它操作
            //                                         => 阻断程序的运行
            // xhr.open("GET","/ajax/test01/request",false);
            //      当第三个参数取值为 true（默认值） 表示异步 => 不会阻断操作
            xhr.open("GET","/ajax/test01/request",true);

            // 3. 请求发送
            xhr.send();

            // 4. 获取请求结果 ==> 只有在请求响应成功后，才能获取到服务结果数据
            //                   所以数据获取操作是需要在发送请求前构建对ajax状态的监控
            let text = xhr.responseText;
            console.log("请求响应的数据:",text)
        }
        function sendAjax2(){
            let xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Micrisoft.XMLHttp");
            }
            // onreadystatechange 监控ajax状态 - 当ajax在请求过程中，状态发生变化时会执行该方法
            // 0 unset xhr 对象已经创建，但未初始化
            // 1 openend xhr对象初始化完成，但未发送请求
            // 2 headers received 已发送请求，但服务器未开始响应
            // 3 loading 服务开始响应，但未响应完成
            // 4 done 响应结束请求成功 => 不区分响应结果状态的
            //          ajax 状态为4只是表示ajax执行成功，http结果是否成功，需要由HTTP的状态码判断
            xhr.onreadystatechange = function (){
                console.log("ajax状态",xhr.readyState);
                console.log("http状态",xhr.status);
                if( xhr.readyState==4 && xhr.status<400 ){
                    let text = xhr.responseText;
                    console.log("请求响应的数据:",text)
                    let result = JSON.parse(text);
                    if(!result.sucess){
                        alert(result.msg);
                        return;
                    }
                    let u = result.data;
                    console.log("请求响应的数据:",u)
                    let ulDom = document.querySelector("#user");
                    ulDom.innerHTML = "";
                    let liDom1 = document.createElement("li");
                    liDom1.innerHTML = `编号:${u.id}`;
                    ulDom.appendChild(liDom1)
                    let liDom2 = document.createElement("li");
                    liDom2.innerHTML = `姓名:${u.name}`;
                    ulDom.appendChild(liDom2)
                    let liDom3 = document.createElement("li");
                    liDom3.innerHTML = `性别:${u.sex}`;
                    ulDom.appendChild(liDom3)
                    let liDom4 = document.createElement("li");
                    liDom4.innerHTML = `账号:${u.username}`;
                    ulDom.appendChild(liDom4)
                    let liDom5 = document.createElement("li");
                    liDom5.innerHTML = `密码:${u.password}`;
                    ulDom.appendChild(liDom5)
                }else if( xhr.readyState==4&&xhr.status>=400 ){
                    console.log("请求失败")
                }
            }

            xhr.open("GET","/ajax/test01/request",true);
            xhr.send();

        }
    </script>
</head>
<body>
    <h1>原始ajax的请求操作</h1>
    <input type="text">
    <hr>
    <input type="button" value="发生ajax请求" onclick="sendAjax()"><br>
    <input type="button" value="发生ajax请求" onclick="sendAjax2()">
    <br><br>
    <ul id="user"></ul>
</body>
</html>








